import React from 'react'
import { ConfigProvider, theme } from 'antd'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'

interface ThemeProviderProps {
  children: React.ReactNode
}

/**
 * 主题提供者组件
 * 根据 Redux store 中的主题设置动态配置 Antd 的主题
 */
const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const { currentTheme, settings } = useSelector((state: RootState) => state.theme)

  // 根据当前主题和设置生成 Antd 主题配置
  const themeConfig = {
    // 使用 Antd 5.x 的主题算法
    algorithm: currentTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
    
    // 主题令牌配置
    token: {
      // 主色调
      colorPrimary: settings.primaryColor,
      
      // 边框圆角
      borderRadius: 6,
      
      // 字体配置
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
      
      // 动画配置
      motionEase: settings.enableAnimation ? 'cubic-bezier(0.645, 0.045, 0.355, 1)' : 'linear',
      motionDurationSlow: settings.enableAnimation ? '0.3s' : '0s',
      motionDurationMid: settings.enableAnimation ? '0.2s' : '0s',
      motionDurationFast: settings.enableAnimation ? '0.1s' : '0s',
    },
    
    // 组件级别的主题配置
    components: {
      // Layout 组件配置
      Layout: {
        headerBg: currentTheme === 'dark' ? '#001529' : '#fff',
        siderBg: currentTheme === 'dark' ? '#001529' : '#fff',
        bodyBg: currentTheme === 'dark' ? '#141414' : '#f0f2f5',
      },
      
      // Menu 组件配置
      Menu: {
        itemBg: 'transparent',
        itemSelectedBg: settings.primaryColor + '15', // 15% 透明度
        itemHoverBg: settings.primaryColor + '08', // 8% 透明度
        itemSelectedColor: settings.primaryColor,
      },
      
      // Button 组件配置
      Button: {
        borderRadius: 6,
      },
      
      // Card 组件配置
      Card: {
        borderRadius: 8,
      },
      
      // Drawer 组件配置
      Drawer: {
        colorBgElevated: currentTheme === 'dark' ? '#141414' : '#fff',
      },
    },
  }

  return (
    <ConfigProvider theme={themeConfig}>
      {children}
    </ConfigProvider>
  )
}

export default ThemeProvider